<template>
  <div
    class="videos grid 2xl:grid-cols-6 xl:grid-cols-5 lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 <sm:grid-cols-1 gap-5 w-full"
  >
    <transition-group
      appear
      enter-active-class="transition duration-800 delay-400 ease-in"
      @before-enter="onBeforeEnter"
      enter-from-class="opacity-0 transform translate-y-25"
      enter-to-class="opacity-100 transform-none"
    >
      <div
        class="video flex-grow relative group overflow-hidden rounded-3xl bg-videobg"
        v-for="(item,index) in videoLists"
        :key="item"
        :data-index="index"
      >
        <div
          class="video-time absolute z-1 top-2.5 right-2 px-2 py-0.75 rounded-md bg-gray-700 bg-opacity-44 text-light-50 group-hover:hidden"
        >8 min</div>
        <div class="video-wrapper relative">
          <video
            muted
            class="max-w-full w-full cursor-pointer object-contain duration-400 group-hover:transform group-hover::scale-160 group-hover:origin-center"
            :ref="setmyvideo"
            @mouseover="onVideoMouseOver(index)"
            @mouseleave="onVideoMouseLeave(index)"
          >
            <source
              src="https://player.vimeo.com/external/436572488.sd.mp4?s=eae5fb490e214deb9ff532dd98d101efe94e7a8b&profile_id=139&oauth2_token_id=57447761"
              type="video/mp4"
            />
          </video>
          <avatar
            class="absolute right-2.5 -bottom-7 duration-400 group-hover:-bottom-580/1000 group-hover:transform group-hover:scale-60 group-hover:-right-0.75"
          ></avatar>
        </div>
        <div
          class="video-by inline-flex relative pt-5 px-5 duration-300 group-hover:opacity-0"
        >Andy William</div>
        <div
          class="video-name pt-3 px-5 text-light-50 text-base"
        >Basic how to ride your skateboard comfortly</div>
        <div class="video-view pt-3 pb-5 px-5 text-xs">
          54K views
          <span
            class="seperater w-1 h-1 inline-block align-middle rounded-1/2 my-0 mx-1 bg-body"
          ></span>
          1 week ago
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script setup lang="ts">
import Avatar from "@renderer/components/common/Avatar.vue";
import { ref, reactive } from "vue-demi";
const videoLists = reactive([1, 2, 3, 4, 5, 6])
const myvideo = [];
const setmyvideo = el => {
  myvideo.push(el)
}
const onBeforeEnter = (el) => {
  let delay = 400 + el.dataset.index * 100
  // console.log('delay', delay);
  for (let i = 0, l = el.classList.length; i < l; ++i) {
    if (/delay-.*/.test(el.classList[i])) {
      console.log('aaa', el.classList[i]);
      el.classList.remove(el.classList[i])
    }
  }
  el.classList.add(`delay-${delay}`)
  // console.log('el class', el.classList);
}
const onVideoMouseOver = (index) => {
  myvideo[index].play()
}
const onVideoMouseLeave = (index) => {
  myvideo[index].pause()
}
</script>

<style lang="scss" scoped>
</style>